<template>
  <div>
    <!-- 表格顶部菜单 -->
    <TableHeader
      :buttons="['refresh', 'comSearch', 'columnDisplay']"
      :quick-search-placeholder="placeholder"
      @action="baTable.onTableHeaderAction"
    />
    <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
    <Table ref="tableRef" @action="baTable.onTableAction" />
  </div>
</template>
<script lang="ts" setup>
import { ref, onUnmounted, onMounted, provide, inject } from "vue";
import baTableClass from "@/utils/baTable";
import { baTableApi } from "@/utils/common"; // 导入表格api方法生成器
import { DeviceMOperWork } from "@/api/backend/index";
import Table from "@/components/table/index.vue";
import TableHeader from "@/components/table/header/index.vue";
import type { TableColumn, TableRow, OptButton } from "@/utils/baTable"; //表格列行类型
import useCurrentInstance from "@/utils/useCurrentInstance";
import { useBackendMonitor } from "@/store/backend/EquipM/monitor"; //实时设备监控仓库
import { useRouter, useRoute } from "vue-router";

const route = useRoute();
const navTabs = inject("navTabs") as any;
// import MQTT from "@/utils/mqtt";
// import type { MqttClient, OnMessageCallback } from "mqtt";
// import Detail from "./detail.vue";

const tableRef = ref();
const placeholder = ref<string>("模糊搜索");

//字段显隐记忆功能
const filedShowOff = (filter: any) => {
  if ((navTabs as any).columnDisplayStoreMap) {
    return (navTabs as any).columnDisplayStoreMap.get(
      route.path + "/" + filter
    );
  }
  return true;
};

// 每页个数记忆功能
const pageSizeKeep = () => {
  if ((navTabs as any).pageSizeMap) {
    return (navTabs as any).pageSizeMap.get(route.path + DeviceMOperWork)
      ? (navTabs as any).pageSizeMap.get(route.path + DeviceMOperWork)
      : 10;
  }
  return 10;
};

const baTable = new baTableClass(new baTableApi(DeviceMOperWork), {
  pk: "gatewaycode",
  column: [
    { type: "selection", align: "center", operator: false },
    // { label: "已激活设备ID", prop: "eid", align: "center", operator: false },
    {
      show: filedShowOff("ecode"),
      label: "设备编号",
      prop: "ecode",
      align: "center",
      operatorPlaceholder: "模糊搜索",
    },
    {
      show: filedShowOff("cname"),
      label: "企业名称",
      prop: "cname",
      align: "center",
    },
    {
      show: filedShowOff("gatewaycode"),
      label: "网关编号",
      prop: "gatewaycode",
      align: "center",
    },
    {
      show: filedShowOff("event"),
      label: "事件名称",
      prop: "event",
      align: "center",
      operator: false,
    },
    {
      show: filedShowOff("eventValue"),
      label: "事件值",
      prop: "eventValue",
      align: "center",
      operator: false,
      width: 160,
    },
    {
      show: filedShowOff("type"),
      label: "操作事件",
      prop: "type",
      align: "center",
      render: "tag",
      custom: { 0: "success", 1: "info", 2: "warning", 3: "danger" },
      replaceValue: {
        0: "开机",
        1: "关机",
        2: "更换滤芯",
        3: "告警",
      },
    },
    {
      show: filedShowOff("eventTime"),
      label: "事件时间",
      prop: "eventTime",
      align: "center",
      operator: false,
    },
  ],
  filter: { gatewaycode: route.query.eid, pageSize: pageSizeKeep() },
  acceptQuery: false, //不接受url的query参数并自动触发通用搜索
});

onMounted(() => {
  //全局事件总线
  const { proxy } = useCurrentInstance();
  //开始连接mqtt
  // startMqtt('主题topic', (topic, message) => {
  //     const msg = JSON.parse(message.toString());
  //     console.log(msg);
  // });
  //将table的ref给到table类
  baTable.table.ref = tableRef.value;
  baTable.mount();
  baTable.getList(DeviceMOperWork);
  /**
   * 表格内的按钮响应
   * @param name 按钮name
   * @param row 被操作行数据
   */
  // proxy.eventBus.on(
  //   "onTableButtonClick",
  //   (data: { name: string; row: TableRow | RootObject }) => {
  //     if (!baTable.activate) return;
  //     //回滚功能暂无
  //     if (data.name == "rollback") {
  //       // onRollback([data.row[baTable.table.pk!]])
  //     } else if (data.name == "info") {
  //       //携带主键字段pk
  //       infoButtonClick(
  //         (data.row as TableRow)[baTable.table.pk!],
  //         (data.row as RootObject)
  //       );
  //     }
  //   }
  // );
});

//   onUnmounted(() => {
//     //页面销毁结束订阅
//     if (PublicMqtt.value) {
//       PublicMqtt.value.unsubscribes();
//       PublicMqtt.value.over();
//     }
//   });

// 实例化表格后，将 baTable 的实例提供给上下文
provide("baTable", baTable);
</script>
<style lang="scss">
.table-com-search {
  .pl-20 {
    margin-left: 50px;
  }
}
</style>
